<template>
  <div>
    <div class="img">
      <img src="../../img/logo.jpg" alt="">
    </div>
    <h1>注册</h1>
    <p><input type="text" placeholder="请输入手机号" class="phone" v-model="phone"></p>
    <p><input type="text" placeholder="请输入验证码" class="code" v-model="code"></p>
    <div v-if="codeb == false">
      <button class="ifyzm" disabled>{{ codetime }}s后重新获取验证码</button>
    </div>
    <div v-else>
      <button class="elyzm" @click="btncode">获取验证码</button>
    </div>
    <van-popup v-model:show="showTop" position="top" class="popcode">
      <p>验证码：{{ codeyzm }}</p>
    </van-popup>
    <p>
    <p class="spwd">设置密码</p>
    <input type="text" placeholder="请输入密码" class="pwd" v-model="pwd">
    </p>
    <p>
      <button class="zc" @click="zc">注册</button>
    </p>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router';
import axios from 'axios';
import { showSuccessToast, showFailToast } from 'vant';
const router = useRouter()
// 手机号
const phone = ref('')
// 验证码
const code = ref('')
// 密码
const pwd = ref('')
// 验证码按钮状态
const codeb = ref(true)
// 验证码倒计时
const codetime = ref(60);
// 验证码
const codeyzm = Math.random().toString().slice(4, 8)
// 发送验证码
const btncode = () => {
  codeb.value = false
  const timer = setInterval(() => {
    codetime.value--;
    if (codetime.value === 0) {
      clearInterval(timer)
      codeb.value = true
      codetime.value = 60
    }
    // console.log(codetime.value)
  }, 1000)
  // 显示验证码弹框
  showTop.value = true
  // codeb.value = true
  console.log(codeb.value, '111')
}
const zc=()=>{
  if(phone.value == '' || code.value == '' || pwd.value == ''){
    // alert('请输入手机号、验证码和密码')
  }else{
    // axios.post('http://192.168.8.5:8000/register',{
    //   // phone: phone.value,
    //   // code: code.value,
    //   // pwd: pwd.value
    // }).then(res=>{
    //   console.log(res)
    // })
    localStorage.setItem('phone',phone.value)
    localStorage.setItem('pwd',pwd.value)
    localStorage.setItem('nickname','用户123')
    localStorage.setItem('avatars','https://img0.baidu.com/it/u=1721572911,3228501054&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1734714000&t=fbd077fce228be92478bbb4078d98d75')
    localStorage.setItem('token','eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6IjE1ODcyNDAxMTIyIiwiaWF0IjoxNzM0MTQwNjA2LCJleHAiOjE3MzQxNDQyMDZ9.-lmbp2hWK3NYquNwkx0LWeRZzlICDv1EQq9A5M5UQwE')
    // alert('注册成功')
    showSuccessToast('注册成功');
    router.push('/login')
  }
}
// 验证码弹框
const showTop = ref(false)
</script>
<style scoped>
.van-toast::v-deep .van-toast__icon {
  font-size: 20px; /* 举例：修改图标大小 */
  background-color: #000;
}
.img {
  width: 100%;
  height: 360px;
  margin-top: -60px;
  /* margin-bottom: 20px; */
}

.img>img {
  width: 60%;
  margin-left: 20%;
}

h1 {
  text-align: center;
}

input {
  width: 80%;
  height: 80px;
  margin-top: 20px;
  margin-left: 10%;
  border: none;
  font-size: 30px;
  border-bottom: 1px solid #ccc;
}

.spwd {
  margin-left: 10%;
  margin-top: 40px;
  font-size: 32px;
  font-weight: 600;
}

.zc {
  width: 80%;
  height: 100px;
  background-color: #0070FF;
  color: #fff;
  margin-left: 10%;
  margin-top: 40px;
  border: none;
  border-radius: 20px;
  font-size: 35px;
}

.popcode{
  width: 100%;
  height: 100px;
  line-height: 100px;
  border-radius: 20px;
  font-size: 30px;
}
.popcode>p{
  margin-left: 40px;
}
.ifyzm {
  width: 360px;
  height: 60px;
  margin-left: 60px;
  border-radius: 30px;
  text-align: center;
  line-height: 60px;
  color: #fff;
  /* background-color: blue; */
  background-color: #ccc;
  position: absolute;
  right: 80px;
  margin-top: -80px;
  border: none;
  font-size: 28px;
}
.elyzm{
  width: 200px;
  height: 60px;
  color: #fff;
  text-align: center;
  line-height: 60px;
  border-radius: 30px;
  position: absolute;
  right: 80px;
  margin-top: -80px;
  background-color: #0070FF;
  border: none;
  font-size: 28px;
}
</style>
